<template>
  <div class="address-edit">
    <CommonBack :title="`地址${title}`"></CommonBack>
    <van-address-edit
      :area-list="areaList"
      :show-delete="title === '编辑' ? true : false"
      show-set-default
      show-search-result
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      :address-info="addressInfo"
      @save="save"
    />
  </div>
</template>

<script>
import { areaList } from "@vant/area-data";
import CommonBack from "@/components/CommonBack.vue";
import { Toast } from 'vant';
export default {
  name: "AddressEdit",
  data() {
    return {
      title: "",
      areaList,
      // 收件人信息初始值
      addressInfo: {},
    };
  },
  methods: {
    firstCreate() {
      this.$store.commit("changeTabShow");
      // 编辑模式
      if (this.$route.params.action === "edit") {
        this.title = '编辑'
        let addressItemEdit = JSON.parse(
          sessionStorage.getItem("addressItemEdit")
        );
        if (addressItemEdit.name) {
          this.addressInfo = addressItemEdit;
        }
      }
      // 添加模式
      else{
        this.title = '添加'
      }
    },
    save(content) {
      // 编辑模式
      if (this.$route.params.action === "edit") {
        this.$store.commit('editAddress' , {...content})
      }
      // 添加模式 
      else {
        // 注意此处需要对象的浅拷贝
        this.$store.commit('addAddress' , {...content})
      }
      setTimeout(() => {
        this.$router.push({
          path: "/addressList",
        });
        Toast.clear();
      }, 500);
    },

  },
  created() {
    this.firstCreate();
  },
  destroyed() {
    this.$store.commit("changeTabShow");
  },
  components: { CommonBack },
};
</script>

<style lang="less" scoped>
.address-edit {
  padding-top: 46px;
  /deep/ .van-cell__title {
    text-align: left;
  }
}
</style>